import React, { useMemo } from 'react';
import { is_empty, obj_str } from 'sui';

const StepView = ({ umd }) => {
    const head_st = "py-1 table-cell px-8 ";
    const cell_st = "py-1 table-cell pl-8 ";

    const getItem =useMemo(() => {
        const main = umd.info;

        if (is_empty(main)) {
            return null;
        }

        const get_val = (d, k) => {
            const tmp = obj_str(d, k);
            if (tmp === "false") {
                return "X";
            }

            return "";
        };

        return main.map(d => {
            return (
                <div className="table-row" key={d.sn}>
                    <div className={cell_st + "text-green-300"}>{obj_str(d, "sn")}</div>
                    <div className={cell_st + "text-green-300"}>{obj_str(d, "pos")}</div>
                    <div className={cell_st + "text-green-300"}>{get_val(d, "inwidth")}</div>
                    <div className={cell_st + "text-green-300"}>{get_val(d, "india")}</div>
                    <div className={cell_st + "text-green-300"}>{get_val(d, "outwidth")}</div>
                    <div className={cell_st + "text-green-300"}>{get_val(d, "outdia")}</div>
                    <div className={cell_st + "text-green-300"}>{get_val(d, "standout")}</div>
                    <div className={cell_st + "text-green-300"}>{get_val(d, "angle")}</div>
                    <div className={cell_st + "text-green-300"}>{get_val(d, "kia")}</div>
                </div>
            );
        });
    }, [umd.info]);

    const View = () => {
        return (
            <div className="table text-white text-xl font-bold ml-4">
                <div className="table-row">
                    <div className={head_st}>编号</div>
                    <div className={head_st}>位置</div>
                    <div className={head_st}>外圈宽度</div>
                    <div className={head_st}>外圈直径</div>
                    <div className={head_st}>外圈沟径</div>
                    <div className={head_st}>内圈宽度</div>
                    <div className={head_st}>内圈直径</div>
                    <div className={head_st}>内圈沟径</div>
                    <div className={head_st}>凸出量</div>
                    <div className={head_st}>接触角</div>
                    <div className={head_st}>旋转精度</div>
                </div>
                {getItem}
            </div>
        );
    };

    return (
        <div className="flex h-full overflow-y-auto">
            <div className="flex flex-wrap content-start">
                <View/>
            </div>
        </div>
    );
};

export {StepView};
